<template>
	<div>
		<div class="header">
			<div class="icon-left" @click="$router.goBack()"><img src="../../static/img/icon/release_icon/return@2x.png"/></div>
			<div @click="dialog = true" class="more">
				<img src="../../static/img/icon/find_icon/more.png" style="width: 20px;height: 5px;"/>
			</div>
		</div>
		<div class="header-null"></div>
		<div class="forum">
			<div class="forum-title">
				<div class="forum-title-name">
					{{info.userName}}
				</div>
				<div class="forum-title-content">
					<div>
						<img src="../../static/img/icon/my_icon/shot@2x.png"/>
					</div>
					<div v-if="$route.query.type != 'select'">
						<div>{{info.user_name}}</div>
						<div>2018年01月05日</div>
					</div>
					<div class="seleted" v-else>
						<div>红红</div><u>|</u>
						<div>2018年01月05日</div>
					</div>
					<div class="follow">
						<span v-if="$route.query.type != 'select'&& !isFollow" @click="follow">关注</span>
						<span class="active" v-else-if="$route.query.type != 'select'" @click="cancel">已关注</span>						
					</div>
				</div>
			</div>
			<div class="forum-content">
				<div class="forum-content-type" v-if="$route.query.type != 'select'" @tap="route('conversationDetail', topic.topicId)">
					#{{info.topicName}}#
				</div>
				<div class="forum-content-title" v-if="$route.query.type != 'select'">
					<div v-html="info.topicContent"></div>
					<div>
						<img :src="item" v-for="item in img_path" width="100%"/>						
					</div>
				</div>
			</div>
		</div>
		<div class="forum-comment" v-if="list.length != 0">
			<div class="forum-comment-header">
				<img src="../../static/img/icon/find_icon/comment@2x.png"/>
				<div>全部评论（{{info.comment_count}}）</div>
			</div>
			<div class="forum-comment-list">
				<div class="forum-comment-list-item" v-for="(item, index) in list" v-if="index < 6" @tap="commentItem(item)">
					<div>
						<img src="../../static/img/icon/denglu_gengxin_icon/logo_denglu@2x.png"/>
					</div>
					<div>
						<div class="item-title">{{item.user_name}}</div>
						<div class="item-date">{{item.time}}</div>
						<div class="item-huifu" v-if="item.type == 2">
							回复{{item.pcUserName}}：{{item.content}}
						</div>
						<div class="item-huifu" v-else>
							{{item.content}}
						</div>
						<div class="item-item-child" v-if="item.type == 2">
							{{item.pcUserName}}：{{item.pContent}}
						</div>
					</div>
				</div>
			</div>
			<div class="forum-commentMore" @tap="route('commentMore', $route.params.id, 3)">
				查看更多评论
			</div>
		</div>
		<div class="fixed-comment">
			<div class="fixed-comment-value" @click="comment">
				<div>写评论</div>
			</div>
			<div class="fixed-comment-num">
				<div>
					<img src="../../static/img/icon/find_icon/comment@2x.png"/>
					<div>{{info.comment_count}}</div>
				</div>
				<div @click="collect">
					<img src="../../static/img/icon/find_icon/collection@2x.png" v-if="!collectShow"/>
					<img src="../../static/img/icon/find_icon/collection_faxian@3x.png" v-else/>
					<div>{{info.collect_count}}</div>
				</div>
				<div @click="like">
					<img src="../../static/img/icon/find_icon/heart_luntan@2x.png" v-if="!likeShow"/>
					<img src="../../static/img/icon/find_icon/heart_xuanzhong_luntan@3x.png" v-else/>
					<div>{{info.like_count}}</div>
				</div>
			</div>
		</div>
		<v-common :dialog="show" :id='id' @hide="hide" @submit="submit" :placeholder="commonName"></v-common>
		<v-share :dialog="dialog" @hide="dialog = false"></v-share>
	</div>
</template>

<script>
	import {getData} from '../service/getData'
	import VCommon from '../base/v-common'
	import VShare from '../base/v-share'
	export default {
		data() {
			return {
				show: false,
				tag: {},
				isFollow: false,
				info: {},
				topic: {},
				commonName: '我也来评论两句',
				collectShow: false,
				likeShow: false,
				list: [],
				id: null,
				dialog: false,
				img_path: []
			}
		},
		components: {
			VCommon,
			VShare
		},
		methods: {
			init() {  //默认加载
				this.$store.state.isLoading = true
				getData('/childtopic/getChildTopicByIdApi', {
					ChildTopicID: this.$route.params.id
				}).then(d => {
					this.$store.state.isLoading = false
					this.info = d.childTopic
					this.tag = d.tag
					this.topic = d.topic
					this.img_path = d.childTopic.topicPicture.split(",")
					this.isFollow = d.isLikeCollectFollow.isfollow == 0 ? false : true
					this.collectShow = d.isLikeCollectFollow.iscollect == 0 ? false : true
					this.likeShow = d.isLikeCollectFollow.islike == 0 ? false : true
					getData('/comment/appCommentList', {
						noteType: 3,
						page: 1,
						pdId: this.info.ChildTopicID
					}).then(d => {
						d.object.list.map(x => {
							let date = new Date(x.time)
							x.time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours()+ ':' +date.getMinutes()+ ':' +date.getSeconds();
						})
						this.list = d.object.list
					})
				}).catch(err => {
					this.$store.state.isLoading = false
				}) 
			},
			like() {  //点赞
				getData('/like/appToLike', {
					token: sessionStorage.token,
					pdId: this.info.ChildTopicID,
					noteType: 3
				}).then(d => {
					if(d.code == 100) {
						if(d.object == 1) {
							this.likeShow = true
							this.info.like_count += 1
						} else {
							this.info.like_count -= 1
							this.likeShow = false
						}
					}
				})
			},
			comment() {  //评论
				this.commonName = '我也来评论两句';
				this.show = true;
			},
			commentItem(item) { //子评论
				this.commonName = "回复" + item.user_name + ":"
				this.id = item.com_id
				this.show = true
			},
			hide() {  //隐藏
				this.show = false
			},
			follow() {  //关注
				getData('/follow/appAddFollow', {
					token: sessionStorage.token,
					userId: this.info.userId
				}).then(d => {
					if(d.code == 100) {
						mui.toast(d.msg)
						this.isFollow = true							
					}
				})
			},
			cancel() {  //取消关注
				getData('/follow/appDeleteFollow', {
					token: sessionStorage.token,
					userId: this.info.userId
				}).then(d => {
					if(d.code == 100) {
						this.isFollow = false							
					}
				})
			},
			collect() {  //收藏
				getData('/collect/appAddCollect', {
					token: sessionStorage.token,
					noteId: this.info.ChildTopicID,
					type: 3
				}).then(d => {
					if(d.code == 100) {
						this.collectShow = true
						this.info.collect_count += 1
					}
				})
			},
			submit(content, id) {  //评论
				this.$store.state.isLoading = true
				if(this.$route.query.type == 'select') {
					getData('/comment/appAddComment', {
						token: sessionStorage.token,
						content: content,
						pdId: this.info.ChildTopicID,
						noteType: 3,
						pid: id
					}).then(d => {
						this.$store.state.isLoading = false
					})								
				} else {
					getData('/comment/appAddComment', {
						token: sessionStorage.token,
						content: content,
						pdId: this.info.ChildTopicID,
						noteType: 3,
						pid: id
					}).then(d => {
						this.$store.state.isLoading = false
						if(d.code == 100) {
							this.show = false
							mui.toast(d.object)
							this.info.comment_count ++
						} else {
							mui.toast(d.msg)
						}
					})											
				}
			}
		},
		mounted() {
			this.init()
		}
	}
</script>

<style scoped lang="less">
	.forum {
		padding: 10px;
		background: #fff;
		
		.forum-title {
			border-bottom: 1px solid #e5e5e5;
			
			.forum-title-name {
				font-size: 15px;
				font-weight: bold;
			}
			
			.forum-title-content {
				display: flex;
				margin: 10px 0;
				align-items: center;
				
				div:nth-child(1) {
					display: flex;
					align-items: center;
				}
				
				img {
					width: 40px;
					height: 40px;
					margin-right: 20px;
				}
				
				.seleted {
					display: flex;
					
					div {
						padding: 0 5px;
						
						&:first-child {
							color: #000;
						}
					}
				}
				
				div:nth-child(2) {
					flex: 1;
					
					&:last-child {
						color: #7B7B7B;						
					}
				}
				
				
				.follow {
					.active {
						background: #ccc;
						color: #7B7B7B;
					}
					
					span {
						padding: 5px 10px;
						color: #fff;
						border-radius: 5px;
						background: #c9eb59;
					}
				}
			}
			
		}
		.forum-content {
				
			.forum-content-type {
				margin: 10px 0;
				color: indianred;
				font-size: 14px;
			}
			
			/*.forum-content-title {
				
			}*/
			
			.forum-content-imgs {
				margin-top: 10px;
				
				img {
					width: 100%;
					margin-bottom: 5px;
				}
			}
		}
	}
	.forum-comment {
		margin-bottom: 50px;
		
		.forum-comment-header {
			margin: 5px 0;
			padding: 5px 10px;
			display: flex;
			align-items: center;
			background: #fff;
			
			img {
				width: 20px;
				height: 20px;
				margin-right: 10px;
			}
		}	
		
		.forum-comment-list {
			
			.forum-comment-list-item {
				background: #fff;
				display: flex;
				padding: 10px;
				border-bottom: 1px solid #EEEEEE;
				
				div:nth-child(1) {
					img {
						width: 40px;
						height: 40px;
						margin-right: 10px;
					}					
				}
				
				div:nth-child(2) {
					flex: 1;
					
					.item-title {
						color: #c9eb59;
						margin-bottom: 5px;
					}
					
					.item-date {
						color: #7B7B7B;
						margin-bottom: 5px;
					}
					
					.item-huifu {
						margin-bottom: 5px;
					}
					
					.item-item-child {
						padding: 10px;
						background: #E5E5E5;
					}
				}
			}
		}	
		
		.forum-commentMore {
			display: flex;
			justify-content: center;
			padding: 10px;
			background: #fff;
		}
	}
	
	.fixed-comment-null {
		padding: 13px;
		width: 100%;
	}
	
	.fixed-comment {
		position: fixed;
		bottom: 0;
		width: 100%;
		border-top: 1px solid #eee;
		display: flex;
		background: #fff;
		padding: 10px 0;
		align-items: center;
		
		.fixed-comment-value {
			padding: 0 5px;
			flex: 1;
			
			div {
				border: 1px solid #eee;
				border-radius: 5px;
				padding: 2px 5px;
				display: flex;
				justify-content: center;
				input {
					font-size: 14px;
				}
			}
		}
		
		.fixed-comment-num {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10px;
			
			div {
				align-items: center;
				display: flex;
			}
			
			img {
				width: 15px;
				height: 15px;
				margin-right: 5px;
			}
		}
	}
</style>